<template>
  <view class="container">
    <!-- 背景装饰 -->
    
    <!-- 自定义顶部导航栏 -->
    <view class="custom-nav-bar" style="background-color: transparent;">
      <!-- <text class="nav-bar-title">我的</text> -->
       <image
        src="../../static/tab/logo.png"
        style="width: 270rpx;height: 68rpx;"
        mode="widthFix"
        class="nav-bar-image"
       />
    </view>
    <view class="bg-image-container">
      <image src="../../static/home/bg.png" mode="widthFix"
        class="nav-bar-image bg-image" />
    </view>
    
    <!-- 用户信息区域 -->
    <view class="user-info-section glass-effect">
      <view class="user-avatar-wrapper">
        <view class="user-avatar">
          <image :src="userInfo && userInfo.avatar ? userInfo.avatar : 'https://i.imgs.ovh/2025/09/05/Ntkux.png'" mode="aspectFill"></image>
        </view>
      </view>
      <view class="user-info">
        <view class="user-details">
          <text class="user-name">{{userInfo && userInfo.nickname ? userInfo.nickname : (userInfo ? '未设置昵称' : '未登录')}}</text>
          <view class="user-stats">
            <text class="user-id">{{openid ? '我的水平：'+ (userInfo.skillLevel ? userInfo.skillLevel.slice(0,3):userInfo.skill_level ? userInfo.skill_level.slice(0,3) : '未设置'):'未登录'}}</text>
          </view>
        </view>
      </view>
      <!-- 加载指示器 -->
      <view v-if="isUserInfoLoading" class="loading-indicator">
        <!-- <text>加载中...</text> -->
      </view>
      <view class="edit-profile" @tap="handleEditProfile">
        <view class="edit-icon">
          <image style="width: 24rpx; height: 24rpx;" :src="userInfo ? '/static/mine/edit-icon.png' : '/static/mine/login-icon.png'" mode="aspectFit"></image>
        <text>{{ userInfo ? '编辑资料' : '立即登录' }}</text>
        </view>
        
      </view>
    </view>
    
    <!-- VIP会员卡片 - 暂时隐藏 -->
    <!-- <view class="vip-card glass-effect">
        <view class="vip-left">
          <view class="vip-icon">
            <image src="/static/vip-icon.svg" mode="aspectFit"></image>
          </view>
          <view class="vip-info">
            <text class="vip-title">VIP会员</text>
            <text class="vip-desc">专享特权，更多优惠</text>
          </view>
        </view>
        <view class="vip-right">
          <view class="vip-btn" @tap="navigateToVip">立即开通</view>
        </view>
      </view> -->
    
    <!-- 功能区域 -->
    <view v-if="false" class="function-section">
      <view class="function-row">
        <!-- 我的球场 -->
        <view class="function-item glass-effect enhanced" @tap="navigateToMyCourts">
          <view class="function-icon">
            <image src="/static/venue-icon.svg" mode="aspectFit"></image>
          </view>
          <view class="function-content">
            <text class="function-title">我的球场</text>
            <text class="function-desc">{{myCourtsCount || 0}}个球场</text>
          </view>
          <view class="function-badge" v-if="myCourtsCount > 0">{{myCourtsCount}}</view>
          <view class="function-arrow">></view>
        </view>
        
        <!-- 我的钱包 -->
        <view class="function-item glass-effect enhanced" @tap="navigateToMyWallet">
          <view class="function-icon">
            <image src="/static/wallet-icon.svg" mode="aspectFit"></image>
          </view>
          <view class="function-content">
            <text class="function-title">我的钱包</text>
            <text class="function-desc">余额: ¥{{walletBalance || '0.00'}}</text>
          </view>
          <view class="function-arrow">></view>
        </view>
      </view>
    </view>
    
    <!-- 其他功能区域 -->
    <view v-if="false" class="other-section">
      <view class="section-title">更多服务</view>
      <view class="other-grid">
        <view class="other-item glass-effect" @tap="navigateToMyOrders">
          <view class="other-icon">
            <image src="/static/order-icon.svg" mode="aspectFit"></image>
          </view>
          <text class="other-text">我的订单</text>
        </view>
        <view class="other-item glass-effect" @tap="navigateToMyFavorites">
          <view class="other-icon">
            <image src="/static/favorite-icon.svg" mode="aspectFit"></image>
          </view>
          <text class="other-text">我的收藏</text>
        </view>
        <view class="other-item glass-effect" @tap="navigateToMyCoupons">
          <view class="other-icon">
            <image src="/static/coupon-icon.svg" mode="aspectFit"></image>
          </view>
          <text class="other-text">优惠券</text>
        </view>
        <view class="other-item glass-effect" @tap="navigateToInviteFriends">
          <view class="other-icon">
            <image src="/static/invite-icon.svg" mode="aspectFit"></image>
          </view>
          <text class="other-text">邀请好友</text>
        </view>
      </view>
    </view>
    
    <!-- 设置区域 -->
    <view class="settings-section">
      <view v-if="true" class="settings-item glass-effect" @tap="contactCustomerService">
        <view class="settings-icon">
          <image src="/static/mine/kf.png" style="width: 32rpx;height: 30rpx;" mode="widthFix"></image>
        </view>
        <button open-type="contact" class="customer-service-text">
          联系客服
        </button>
        <span class="settings-arrow"></span>
      </view>
      <view v-if="true" class="settings-item glass-effect" @tap="navigateToSettings">
        <view class="settings-icon">
          <image src="/static/mine/sj.png" style="width: 32rpx;height: 30rpx;" mode="widthFix"></image>
        </view>
        <text class="settings-text">系统更新</text>
        <span class="settings-arrow"></span>
      </view>
      <view v-if="false" class="settings-item glass-effect" @tap="navigateToFeedback">
        <view class="settings-icon">
          <image src="/static/feedback-icon.svg" mode="aspectFit"></image>
        </view>
        <text class="settings-text">反馈</text>
        <span class="settings-arrow"></span>
      </view>
      <view v-if="false" class="settings-item glass-effect" @tap="navigateToAbout">
        <view class="settings-icon">
          <image src="/static/about-icon.svg" style="width: 30rpx;height: 30rpx;" mode="widthFix"></image>
        </view>
        <text class="settings-text">关于我们</text>
        <span class="settings-arrow"></span>
      </view>
      <view class="settings-item glass-effect logout-item" v-if="userInfo" @tap="logout">
        <view class="settings-icon">
          <image src="/static/mine/tc.png" style="width: 32rpx;height: 30rpx;" mode="widthFix"></image>
        </view>
        <text class="settings-text logout-text">退出登录</text>
        <span class="settings-arrow"></span>
      </view>
    </view>
    
    
    <!-- 自定义系统更新模态框 -->
    <view v-if="showUpdateModal || isModalClosing" :class="['update-modal-mask', showUpdateModal ? 'show' : '']" @tap="closeUpdateModal">
      <view class="update-modal" @tap.stop>
        <view class="update-modal-header">
          <text class="update-modal-title">系统更新</text>
        </view>
        <view class="update-modal-content">
          <text class="update-version">当前版本：{{ edition }}</text>
          <view class="update-content-title">本次更新内容：</view>
          <view class="update-content-list">
            <text class="update-content-item">• 增加了广州许多球馆</text>
          </view>
        </view>
        <view class="update-modal-footer">
          <button class="update-modal-btn" @tap="closeUpdateModal">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import LiquidGlassNav from '@/components/LiquidGlassNav.vue'
import LoginManager from '@/utils/login.js'
import { globalLoginState } from '@/App.vue'

export default {
  components: {
    LiquidGlassNav
  },
  data() {
    return {
      currentTab: 'mine', // 当前选中的标签
      // 页面数据
      userInfo: null,
      walletBalance: 0, // 钱包余额
      userLevel: 1, // 用户等级
      myCourtsCount: 0, // 我的球场数量
      isVip: false, // 是否是VIP会员
      openid:uni.getStorageSync('openid'),
      userInfoUpdateTimer: null, // 用户信息更新定时器
      isUserInfoLoading: false, // 用户信息加载状态
      showUpdateModal: false, // 是否显示系统更新模态框
      isModalClosing: false, // 模态框是否正在关闭
      edition:''
    }
  },
  async onLoad() {
    console.log('Mine page onLoad');
    // 页面加载时获取用户信息
    this.updateUserInfoFromGlobalState();
    await this.fetchUserInfoFromDatabase();
    
    // 获取其他数据
    this.getWalletBalance();
    this.getUserLevel();
    this.getMyCourtsCount();
    this.checkVipStatus();
    const accountInfo = wx.getAccountInfoSync();
		this.edition = accountInfo.miniProgram.version;
  },
  onUnload() {
    // 页面卸载时移除监听器
    if (this.loginStateListener) {
      globalLoginState.removeListener(this.loginStateListener)
    }
    // 移除用户信息更新事件监听器
    uni.$off('updateUserInfo');
  },
  onShow() {
    console.log('Mine page onShow');
    
    // 从缓存中获取用户信息
    const cachedUserInfo = uni.getStorageSync('cachedUserInfo');
    if (cachedUserInfo) {
      this.userInfo = { ...this.userInfo, ...cachedUserInfo };
      console.log('从缓存获取用户信息:', this.userInfo);
    }
    
    // 监听用户信息更新事件
    uni.$off('updateUserInfo'); // 先移除之前的监听器，避免重复监听
    uni.$on('updateUserInfo', () => {
      console.log('接收到用户信息更新通知');
      // 从缓存中获取最新的用户信息
      const updatedUserInfo = uni.getStorageSync('cachedUserInfo');
      if (updatedUserInfo) {
        this.userInfo = { ...this.userInfo, ...updatedUserInfo };
        console.log('从缓存获取更新后的用户信息:', this.userInfo);
      }
    });
  },
  methods: {
    async checkLogin() {
      try {
        const loginState = await LoginManager.checkLoginState()
        if (loginState.token) {
          this.userInfo = { uid: loginState.uid }
          // 获取钱包余额
          this.getWalletBalance();
        }
      } catch (e) {
        console.error(e)
      }
    },
    
    // 防抖函数
    debounce(func, wait) {
      let timeout;
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout);
          func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    },
    
    // 更新用户信息（从全局状态）
    updateUserInfoFromGlobalState() {
      try {
        // 使用防抖函数避免频繁更新
        const debouncedUpdate = this.debounce(() => {
          // 从本地存储获取用户信息
          const token = uni.getStorageSync('uni_id_token');
          const openid = uni.getStorageSync('openid');
          const cachedUserInfo = uni.getStorageSync('cachedUserInfo');
          
          console.log('本地存储信息:', { token, openid, cachedUserInfo });
          
          if (token && openid) {
            // 更新用户信息
            if (cachedUserInfo) {
              this.userInfo = { ...this.userInfo, ...cachedUserInfo };
              console.log('更新后的用户信息:', this.userInfo);
            }
            
            // 更新 openid
            this.openid = openid;
          } else {
            console.warn('本地存储中未找到登录信息');
            this.userInfo = null;
            this.openid = null;
          }
        }, 300); // 300ms 防抖延迟
        
        debouncedUpdate();
      } catch (error) {
        console.error('更新用户信息失败:', error);
      }
    },
    
    checkLocalLoginState() {
      const token = uni.getStorageSync('uni_id_token');
      const tokenExpired = uni.getStorageSync('uni_id_token_expired');
      
      if (token && tokenExpired && tokenExpired >= Date.now()) {
        this.userInfo = { token, tokenExpired };
        // 获取钱包余额
        this.getWalletBalance();
      } else {
        this.userInfo = null;
      }
    },
    
    // 从数据库获取用户信息
    async fetchUserInfoFromDatabase() {
      try {
        // 设置加载状态
        this.isUserInfoLoading = true;
        
        // 获取 openid
        const openid = uni.getStorageSync('openid');
        
        if (!openid) {
          console.warn('未找到 openid');
          this.isUserInfoLoading = false;
          return;
        }
        
        // 先尝试从缓存获取用户信息
        const cachedUserInfo = uni.getStorageSync('cachedUserInfo');
        if (cachedUserInfo) {
          this.userInfo = { ...this.userInfo, ...cachedUserInfo };
          console.log('从缓存获取用户信息:', this.userInfo);
        }
        
        // 调用云函数查询用户信息
        const res = await uni.request({
          url: 'https://fc-mp-0c81a8be-aa9a-4fae-8d6c-54b797768401.next.bspapp.com/cloudfunctions/queryUser',
          method: 'POST',
          header: {
            'content-type': 'application/json'
          },
          data: {
            openid: openid
          }
        });
        
        console.log('获取用户信息响应:', res);
        
        if (res.statusCode === 200 && res.data && res.data.code === 0 && res.data.data && res.data.data.length > 0) {
          // 更新用户信息
          const userData = res.data.data[0];
          console.log('用户数据:', userData);
          console.log('用户头像:', userData.avatar);
          this.userInfo = { ...this.userInfo, ...userData };
          console.log('更新后的用户信息:', this.userInfo);
          
          // 将用户信息存储到缓存
          uni.setStorageSync('cachedUserInfo', this.userInfo);
          console.log('用户信息已存储到缓存');
          
          // 注意：不在这里更新全局状态，避免死循环
          this.isUserInfoLoading = false;
          return userData;
        } else {
          console.warn('未找到用户信息:', res.data?.message || '未知错误');
          this.isUserInfoLoading = false;
          return null;
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
        this.isUserInfoLoading = false;
        return null;
      }
    },
    
    // 获取钱包余额
    async getWalletBalance() {
      try {
        // 这里应该调用后端API获取钱包余额
        // 暂时使用模拟数据
        this.walletBalance = 128.50;
      } catch (e) {
        console.error('获取钱包余额失败:', e);
      }
    },
    
    // 处理编辑资料或立即登录
    async handleEditProfile() {
      if (this.userInfo) {
        // 已登录，导航到编辑资料页面
        uni.navigateTo({
          url: '/pages/mine/editUserInfo/index'
        });
      } else {
        // 未登录，执行静默登录
        try {
          const loginResult = await LoginManager.silentLogin();
          console.log("loginResult",loginResult);
          
          if (loginResult.token) {
            // 登录成功后更新用户信息
            this.updateUserInfoFromGlobalState();
            // 从数据库获取最新的用户信息
            await this.fetchUserInfoFromDatabase();
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });
            this.openid = uni.getStorageSync('openid');
          } else {
            throw new Error(loginResult.message || '登录失败');
          }
        } catch (error) {
          console.error('静默登录失败:', error);
          // uni.showToast({
          //   title: '登录失败',
          //   icon: 'none'
          // });
        }
      }
    },
    
    // 导航到我的球场页面
    navigateToMyCourts() {
      uni.navigateTo({
        url: '/pages/mine/my-courts'
      });
    },
    
    // 导航到我的钱包页面
    navigateToMyWallet() {
      uni.navigateTo({
        url: '/pages/mine/my-wallet'
      });
    },
    
    // 显示系统更新信息
    navigateToSettings() {
      // 显示自定义模态框
      this.isModalClosing = false;
      this.showUpdateModal = true;
    },
    
    // 关闭系统更新模态框
    closeUpdateModal() {
      if (this.isModalClosing) return;
      this.isModalClosing = true;
      this.showUpdateModal = false;
      
      // 延迟重置状态，确保动画完成
      setTimeout(() => {
        this.isModalClosing = false;
      }, 300);
    },
    
    // 导航到反馈页面
    navigateToFeedback() {
      uni.navigateTo({
        url: '/pages/mine/feedback'
      });
    },
    
    // 导航到关于我们页面
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/mine/about'
      });
    },
    
    // 导航到VIP页面
    navigateToVip() {
      uni.navigateTo({
        url: '/pages/mine/vip'
      });
    },
    
    // 导航到我的订单页面
    navigateToMyOrders() {
      uni.navigateTo({
        url: '/pages/mine/my-orders'
      });
    },
    
    // 导航到我的收藏页面
    navigateToMyFavorites() {
      uni.navigateTo({
        url: '/pages/mine/my-favorites'
      });
    },
    
    // 导航到优惠券页面
    navigateToMyCoupons() {
      uni.navigateTo({
        url: '/pages/mine/my-coupons'
      });
    },
    
    // 导航到邀请好友页面
    navigateToInviteFriends() {
      uni.navigateTo({
        url: '/pages/mine/invite-friends'
      });
    },
    
    // 获取用户等级
    async getUserLevel() {
      try {
        // 这里应该调用后端API获取用户等级
        // 暂时使用模拟数据
        this.userLevel = 3;
      } catch (e) {
        console.error('获取用户等级失败:', e);
      }
    },
    
    // 获取我的球场数量
    async getMyCourtsCount() {
      try {
        // 这里应该调用后端API获取我的球场数量
        // 暂时使用模拟数据
        this.myCourtsCount = 2;
      } catch (e) {
        console.error('获取我的球场数量失败:', e);
      }
    },
    
    // 检查VIP状态
    async checkVipStatus() {
      try {
        // 这里应该调用后端API检查VIP状态
        // 暂时使用模拟数据
        this.isVip = false;
      } catch (e) {
        console.error('检查VIP状态失败:', e);
      }
    },
    
    // 退出登录
    async logout() {
      // 显示确认对话框
      uni.showModal({
        title: '确认退出',
        content: '您确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 用户点击了确定
            try {
              // 调用登录管理器退出登录
              // await LoginManager.logout();
              
              // 清理用户信息
              this.userInfo = null;
              this.openid = null;
              uni.removeStorageSync('openid');
              
              // 重新获取用户信息以确保刷新
              this.fetchUserInfoFromDatabase();
              
              uni.showToast({
                title: '已退出登录',
                icon: 'success'
              });
              
              // 重新加载页面
              this.reloadPage();
            } catch (error) {
              console.error('退出登录失败:', error);
              uni.showToast({
                title: '退出登录失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 重新加载页面
    reloadPage() {
      // 使用防抖函数避免频繁重新加载
      const debouncedReload = this.debounce(() => {
        // 重新获取用户信息
        this.updateUserInfoFromGlobalState();
        this.fetchUserInfoFromDatabase();
        
        // 重新获取其他数据
        this.getWalletBalance();
        this.getUserLevel();
        this.getMyCourtsCount();
        this.checkVipStatus();
      }, 500); // 500ms 防抖延迟
      
      debouncedReload();
    },
    
    // 切换底部导航栏
    switchTab(tab) {
      this.currentTab = tab;
      switch(tab) {
        case 'home':
          uni.redirectTo({
            url: '/pages/index/index'
          });
          break;
        case 'court':
          uni.redirectTo({
            url: '/pages/court/court'
          });
          break;
        case 'mine':
          uni.redirectTo({
            url: '/pages/mine/mine'
          });
          break;
      }
    },
    // 检查当前页面路径，确保导航栏选中状态正确
    checkCurrentPagePath() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const route = currentPage.route;
      
      // 根据当前页面路径设置导航栏选中状态
      if (route === 'pages/mine/mine') {
        this.currentTab = 'mine';
      }
    },
    
    // 头像加载成功
    onAvatarLoad() {
      console.log('头像加载成功');
      console.log('当前使用的头像URL:', this.userInfo && this.userInfo.avatar ? this.userInfo.avatar : '/static/default-avatar.png');
    },
    
    // 头像加载失败
    onAvatarError(error) {
      console.error('头像加载失败:', error);
      console.log('尝试加载的头像URL:', this.userInfo && this.userInfo.avatar ? this.userInfo.avatar : '/static/default-avatar.png');
      
      // 如果头像加载失败，尝试使用默认头像
      if (this.userInfo) {
        // 确保有一个默认头像URL
        const defaultAvatar = '/static/default-avatar.png';
        
        // 检查avatar是否包含无效的临时文件路径
        if (this.userInfo.avatar && (this.userInfo.avatar.includes('http://tmp/') || this.userInfo.avatar.includes('wxfile://'))) {
          console.log('avatar包含无效的临时文件路径，清空该字段');
          // 由于Vue的响应式限制，我们需要创建一个新的对象
          this.userInfo = { ...this.userInfo, avatar: '' };
        }
        // 如果当前使用的是avatar，则清空它以使用默认头像
        else if (this.userInfo.avatar) {
          console.log('清空avatar字段');
          // 由于Vue的响应式限制，我们需要创建一个新的对象
          this.userInfo = { ...this.userInfo, avatar: '' };
        }
      }
    },
  }
}
</script>

<style>
page{
  /* background-color: #F2F2F6; */
}
.container {
  /* padding: 20rpx; */
  /* min-height: 100vh; */
  /* background: #ffffff; */
  padding-bottom: 140rpx; /* 为底部导航栏留出空间 */
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: -100rpx;
  right: -100rpx;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(66, 133, 244, 0.1), rgba(219, 68, 55, 0.1));
  z-index: 0;
}
.bg-image-container {
  position: absolute;
  z-index: 0;
  top: -100rpx;
}

/* 液态玻璃效果 */
.glass-effect {
  /* background: rgba(255, 255, 255, 0.85); */
  /* backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); */
  border-radius: 40rpx;
  /* box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.1); */
  /* border: 1rpx solid rgba(255, 255, 255, 0.5); */
  position: relative;
  z-index: 1;
}
.bg-image {
    width: 750rpx;
    height: 528rpx;
  }
/* 用户信息区域 */
.user-info-section {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  /* background: rgba(255, 255, 255, 0.85); */
  /* backdrop-filter: blur(20px); */
  /* -webkit-backdrop-filter: blur(20px); */
  /* border: 1rpx solid rgba(255, 255, 255, 0.5); */
  margin-top: calc(98rpx + env(safe-area-inset-top));
}

.user-avatar-wrapper {
  position: relative;
  margin-right: 30rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.avatar-border {
  position: absolute;
  top: -10rpx;
  left: -10rpx;
  right: -10rpx;
  bottom: -10rpx;
  border-radius: 70rpx;
  background: linear-gradient(45deg, #4285f4, #ea4335);
  z-index: 1;
  opacity: 0.7;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.user-stats {
  display: flex;
  align-items: center;
}

.user-id {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-right: 20rpx;
  background: #FFFFFFFF;
  color: #F2A922;
  padding: 5rpx 20rpx;
  border-radius: 100rpx;
}

.user-level {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  background: linear-gradient(45deg, #fbbc05, #ea4335);
  color: #fff;
  border-radius: 20rpx;
}

.edit-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx 40rpx;
  background: #39ad6812;
  border-radius: 400rpx;
  color: #39AD68;
  font-size: 24rpx;
  margin-left: auto;
}

.edit-icon {
  font-size: 28rpx;
  margin-bottom: 5rpx;
  /* width: 24px; */
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-icon image {
  margin-right: 20rpx;
}

/* VIP会员卡片 */
.vip-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 30rpx;
  background: linear-gradient(135deg, rgba(251, 188, 5, 0.1), rgba(234, 67, 53, 0.05));
  border: 1rpx solid rgba(251, 188, 5, 0.2);
}

.vip-left {
  display: flex;
  align-items: center;
}

.vip-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vip-icon image {
  width: 100%;
  height: 100%;
}

.vip-info {
  display: flex;
  flex-direction: column;
}

.vip-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fbbc05;
  margin-bottom: 5rpx;
}

.vip-desc {
  font-size: 24rpx;
  color: #999;
}

.vip-btn {
  padding: 15rpx 30rpx;
  background: linear-gradient(45deg, #fbbc05, #ea4335);
  color: #fff;
  font-size: 26rpx;
  border-radius: 40rpx;
  font-weight: bold;
}

/* 功能区域 */
.function-section {
  margin-bottom: 30rpx;
}

.function-row {
  display: flex;
  justify-content: space-between;
  margin: 0 -10rpx;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
  overflow: hidden;
  width: calc(50% - 20rpx);
  margin: 0 10rpx 20rpx;
  border-radius: 24rpx;
}

.function-item.enhanced {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
  border: none;
  backdrop-filter: blur(15rpx);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.function-item.enhanced:nth-child(1) {
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.08), rgba(25, 118, 210, 0.08)), linear-gradient(45deg, rgba(66, 133, 244, 0.2), rgba(25, 118, 210, 0.2)), linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9));
  border: none;
  box-shadow: 0 15rpx 50rpx rgba(66, 133, 244, 0.15), 0 10rpx 40rpx rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20rpx);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.function-item.enhanced:nth-child(2) {
  background: linear-gradient(135deg, rgba(251, 188, 5, 0.15), rgba(234, 67, 53, 0.15)), linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
  border: none;
}

.function-item.enhanced:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.function-icon image {
  width: 60rpx;
  height: 60rpx;
}



.function-content {
  flex: 1;
}

.function-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

.function-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
  font-weight: 500;
}

.function-badge {
  min-width: 40rpx;
  height: 40rpx;
  padding: 0 10rpx;
  background: #ea4335;
  color: #fff;
  font-size: 22rpx;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15rpx;
}

.function-arrow {
  display: none;
}

/* 其他功能区域 */
.other-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
}

.other-grid {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 -10rpx;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.1);
  border-radius: 24rpx;
  padding: 20rpx 10rpx;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.other-item {
  width: calc(25% - 20rpx);
  margin: 0 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 10rpx;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

.other-icon {
  font-size: 40rpx;
  margin-bottom: 10rpx;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: brightness(0) saturate(100%) invert(33%) sepia(95%) saturate(1352%) hue-rotate(202deg) brightness(96%) contrast(96%);
}

.other-icon image {
  width: 100%;
  height: 100%;
}

.other-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

/* 设置区域 */
.settings-section {
  margin: 0 30rpx;
  margin-bottom: 30rpx;
  /* box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.1); */
  overflow: hidden;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 30rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 51rpx  #c8c8c840;
  
}

.settings-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 0;
  position: relative;
  background: #fff;
  box-shadow: none;
  border: none;
}

.settings-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30rpx;
  right: 30rpx;
  height: 1rpx;
  background: rgba(0, 0, 0, 0.05);
}

.settings-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
  width: 50rpx;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* filter: brightness(0) saturate(100%) invert(33%) sepia(95%) saturate(1352%) hue-rotate(202deg) brightness(96%) contrast(96%); */
}

.settings-icon image {
  width: 100%;
  height: 100%;
}

.settings-text {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.settings-arrow {
  width: 16rpx;
  height: 32rpx;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
  margin-right: 20rpx;
}

.settings-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16rpx;
  height: 16rpx;
  border-top: 3rpx solid #999;
  border-right: 3rpx solid #999;
  transform: translate(-25%, -50%) rotate(45deg);
  transition: all 0.3s ease;
}

.settings-item:active .settings-arrow::before {
  border-color: #666;
  transform: translate(-10%, -50%) rotate(45deg) scale(1.1);
}

/* 退出登录选项不再特殊处理 */

/* 加载指示器 */
.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50rpx;
  font-size: 28rpx;
  color: #999;
}
.customer-service-text{
  display: inline-block;
  margin: 0 !important;
  flex: 1;
  background: transparent !important;
  border: none !important;
  text-decoration: none;
  padding: 0 !important;
  outline: none !important;
  color: #333 !important;
  font-size: 30rpx !important;
  text-align: left;
  line-height: normal;
  box-shadow: none !important;
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.customer-service-text::after {
  border: none !important;
  box-shadow: none !important;
}

/* 系统更新模态框样式 */
.update-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.update-modal-mask.show {
  opacity: 1;
}

.update-modal {
  width: 80%;
  max-width: 600rpx;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 40rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 1);
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.update-modal-mask.show .update-modal {
  transform: scale(1);
  opacity: 1;
}

.update-modal-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-20rpx);
  opacity: 0;
  transition: all 0.3s ease-out 0.1s;
}

.update-modal-mask.show .update-modal-header {
  transform: translateY(0);
  opacity: 1;
}

.update-modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.5);
}

.update-modal-content {
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(20rpx);
  opacity: 0;
  transition: all 0.3s ease-out 0.2s;
}

.update-modal-mask.show .update-modal-content {
  transform: translateY(0);
  opacity: 1;
}

.update-version {
  font-size: 28rpx;
  color: #555;
  margin-bottom: 20rpx;
  display: block;
  text-shadow: 0 1rpx 1rpx rgba(255, 255, 255, 0.3);
}

.update-content-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  text-shadow: 0 1rpx 1rpx rgba(255, 255, 255, 0.3);
}

.update-content-list {
  display: flex;
  flex-direction: column;
}

.update-content-item {
  font-size: 28rpx;
  color: #555;
  margin-bottom: 15rpx;
  line-height: 1.5;
  text-shadow: 0 1rpx 1rpx rgba(255, 255, 255, 0.3);
}

.update-modal-footer {
  padding: 20rpx 30rpx 30rpx;
  display: flex;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(20rpx);
  opacity: 0;
  transition: all 0.3s ease-out 0.3s;
}

.update-modal-mask.show .update-modal-footer {
  transform: translateY(0);
  opacity: 1;
}

.update-modal-btn {
  background: linear-gradient(135deg, #4285f4, #3b78e7);
  color: #fff;
  font-size: 30rpx;
  padding: 15rpx 200rpx;
  border-radius: 400rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  outline: none;
  box-shadow: 0 4rpx 15rpx rgba(66, 133, 244, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: scale(0.9);
  transition: all 0.2s ease-out 0.4s;
}

.update-modal-mask.show .update-modal-btn {
  transform: scale(1);
}

.update-modal-btn:active {
  transform: scale(0.95);
}
</style>
